<template>
  <view>
    <video
        v-if="article && article.content_type === 'video'"
        :autoplay="true"
        class="video"
        :controls="true"
        :direction="0"
        :showCenterPlayBtn="true"
        playBtnPosition="center"
        :poster="article.video_poster"
        :src="article.video_url"
        ref="video"
    ></video>
    <view class="container" v-else-if="article">
      <rich-text :nodes="article.content"></rich-text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: '',
      id: 0,
      article: null
    };
  },
  onLoad(option) {
    if (!option.type) {
      uni.navigateBack()
      return
    }
    this.type = option.type;
    if (option.id) {
      this.id = option.id;
    }
    this.getDetail()
  },
  onHide() {
    if (this.article && this.article.content_type === 'video' && this.$refs.video) {
      this.$refs.video.pause()
    }
  },
  methods: {
    getDetail() {
      this.$util.request({
        url: '/article/getDetail',
        data: {
          type: this.type,
          id: this.id
        }
      }).then(res => {
        this.article = res.data
        uni.setNavigationBarTitle({
          title: this.article.title
        })
      })
    }
  }
}
</script>
<style>
@import './detail.css';
</style>
